<!doctype html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Content-Language" content="en" />
  <meta name="msapplication-TileColor" content="#2d89ef">
  <meta name="theme-color" content="#4188c9">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
  <!-- Generated: 2019-04-04 16:55:45 +0200 -->
  <title>操作日志</title>
  <script src="./assets/js/require.min.js"></script>
  <script src="./assets/js/owner_work.js"></script>
  <!-- Dashboard Core -->
  <link href="./assets/css/dashboard.css" rel="stylesheet" />
  <script src="./assets/js/dashboard.js"></script>
  <!-- 时间 -->

</head>

<body class="">
  <div class="" role="alert" id="alert_tip">
    <i class="" aria-hidden="true"></i> <span> </span>
  </div>
  <div class="page">
    <div class="flex-fill">
      <div class="header py-4">
        <div class="container">
          <div class="d-flex">
            <a class="header-brand" href="./index.html">
              <h2 class="mt-0 mb-4">Owner-work</h2>
            </a>
            <div class="d-flex order-lg-2 ml-auto">
              <div class="nav-item d-none d-md-flex">
                <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
              </div>
              <div class="dropdown">
                <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                  <span class="avatar avatar-lg"></span>
                  <span class="ml-2 d-none d-lg-block">
                    <span class="text-default" id="userName"> </span>
                    <small class="text-muted d-block mt-1">Administrator</small>
                  </span>
                </a>
                <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                  <a class="dropdown-item" href="./user_info.html">
                    <i class="dropdown-icon fe fe-user"></i> 个人信息
                  </a>
                  <a class="dropdown-item" href="#">
                    <i class="dropdown-icon fe fe-settings"></i> 设置
                  </a>
                  <a class="dropdown-item" href="./email_change.html">
                    <i class="dropdown-icon fe fe-mail"></i> 更改邮箱
                  </a>
                  <a class="dropdown-item" href="./password_change.html">
                    <i class="dropdown-icon fe fe-send"></i> 更改密码
                  </a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="./faq.html" target="_blank">
                    <i class="dropdown-icon fe fe-help-circle"></i> 需要帮助?
                  </a>
                  <a class="dropdown-item" href="#" onclick="loginOut()">
                    <i class="dropdown-icon fe fe-log-out"></i> 退出
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-lg order-lg-first">
              <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                <li class="nav-item">
                  <a href="./index.html" class="nav-link"><i class="fe fe-cloud"></i> 首页</a>
                </li>
                <li class="nav-item dropdown">
                  <a href="./company.html" class="nav-link "><i class="fe fe-cloud-drizzle"></i> 公司管理</a>
                </li>
                <li class="nav-item">
                  <a href="./company_data.html" class="nav-link"><i class="fe fe-cloud-lightning"></i>账户管理 </a>
                </li>
                <li class="nav-item">
                  <a href="./logger.html" class="nav-link active"><i class="fe fe-cloud-rain"></i> 操作日志</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="my-3 my-md-5">
        <div class="container">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <div class="col-lg-3 ml-auto">
                  <form class="input-icon my-3 my-lg-3">
                    <input type="text" class="form-control header-search" placeholder="输入关键字查询" name="search">
                    <div class="input-icon-addon">
                      <button type="button" class="btn btn-secondary" onclick="queryLog()"><i class="fe fe-search"></i></button>
                    </div>
                  </form>
                </div>
              </div>
              <div class="dimmer" id="dimmer_body">
                <div class="loader"></div>
                <div class="table-responsive dimmer-content">
                  <table class="table card-table table-vcenter text-nowrap datatable">
                    <thead>
                      <tr>
                        <th class="w-1">No.</th>
                        <th>用户名</th>
                        <th>操作</th>
                        <th>IP地址</th>
                        <th>时间</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>暂无数据！</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="card-footer" name="pagnate" style="text-align: center;">
                <label>共 <span id="data_count">1</span> 条</label>
                <label>每页 <select name="the_limit" class="select">
                    <option value="15">15</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                  </select> 条</label>
                <label>
                  <button class="btn btn-blue" id="previou_page">上一页</button>
                  <label><span id="current_page">1</span> / <span id="total_page">1</span></label>
                  <button class="btn btn-blue" id="next_page">下一页</button>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="footer">
      <div class="container">
        <div class="row align-items-center flex-row-reverse">
          <div class="col-auto ml-lg-auto">
            <div class="row align-items-center">
              <div class="col-auto">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item"><a href="./faq.html" target="_blank">FAQ</a></li>
                </ul>
              </div>
              <div class="col-auto">
                <a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm" target="_blank">Source code</a>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
            Copyright © 2020 <a href="./index.html">Owner-work</a>. 有任何问题，请发送邮件至邮箱 heliangyuan10#163.com (#换成@).
          </div>
        </div>
      </div>
    </footer>
  </div>
</body>
<script>
  require(["jquery"], function($){
    $("#userName")[0].innerText = localStorage.UserName
    if (localStorage.UserHeadImg!=null && localStorage.UserHeadImg!="null" && localStorage.UserHeadImg!=""){
      $(".avatar.avatar-lg").css("background-image", "url("+ localStorage.UserHeadImg +")")
    }else{
      $(".avatar.avatar-lg").css("background-image", "url(./demo/faces/male/44.jpg)")
    }
    // 初始化数据
    getLogList()

    // 点击上一页
    $("#previou_page").click(() => {
      console.log("当前第 " + $("#current_page")[0].innerText + " 页")
      if ($("#current_page")[0].innerText == 1) {
        console.log("当前已是第一页！")
      } else {
        getLogList(page = parseInt($("#current_page")[0].innerText) - 1)
      }
    })

    // 点击下一页
    $("#next_page").click(() => {
      console.log("当前第 " + $("#current_page")[0].innerText + " 页")
      if ($("#current_page")[0].innerText == $("#total_page")[0].innerText) {
        console.log("当前已是最后一页！")
      } else {
        getLogList(page = parseInt($("#current_page")[0].innerText) + 1)
      }
    })

    // 选择每页多少数据
    $("select[name=the_limit]").change(() => {
      let limit_c = $("select[name=the_limit]").val()
      console.log(limit_c)
      getLogList(page = 1)
    })
  })

  function getLogList(page=1){
    $("#dimmer_body").addClass("active")
    $.ajax(localStorage.BaseUrl + "/user/do_log", {
      method: "GET",
      headers: {
        Authorization: localStorage.Token
      },
      data: {
        page: page,
        limit: $("select[name=the_limit]").val(),
        key_word: $("input[name=search]").val(),
        date_time: ""
      }
    }).done(function(data){
      console.log(data)
      checkUserToken(data["status"], data["msg"])
      if (data["status"] == 1){
        $("#current_page")[0].innerText = page
        // 总条数
        $("#data_count")[0].innerText = data["data"]["data_count"]
        // 分几页
        $("#total_page")[0].innerText = Math.ceil(data["data"]["data_count"] / $("select[name=the_limit]").val())
        $("tbody").empty()

        if (data["data"]["data_count"] == 0){
          emptyDataList()
        }else{
          for (i=0;i<data["data"]["data_list"].length;i++){
            data["data"]["data_list"][i]["No"] = i+1
            addDataList(data["data"]["data_list"][i])
          }
        }
      }else{
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function(xhr, status){
      if(status="error"){
        server_500()
      }
    }).always(()=>{
      $("#dimmer_body").removeClass("active")
    })
  }
  // 拼接数据
  function addDataList(data) {
    let tbody = $("tbody")[0]
    let new_tr = document.createElement("tr")
    let data_No = data["No"]
    let data_username = data["user_name"] || ""
    let data_todo = data["todo"] || ""
    let data_ip = data["ip"] || ""
    let data_create_time = data["create_time"] || ""

    new_tr.innerHTML = `<td><span class="text-muted">` + data_No + `</span></td>
                        <td>` + data_username + `</td>
                        <td>` + data_todo + `</td>
                        <td>` + data_ip + ` </td>
                        <td>` + data_create_time + `</td>`
    tbody.append(new_tr)
  }
  function emptyDataList(){
    let tbody = $("tbody")[0]
    let new_tr = document.createElement("tr")
    new_tr.innerHTML = `<td> 暂无数据！</td>`
    tbody.append(new_tr)
  }

  // 查询
  function queryLog(){
    getLogList()
  }

</script>
</html>